<template>
  <div 
    v-if="visible" 
    class="dropdown-menu" 
    :ref="menuRef"
    @click.stop
  >
    <slot />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
  visible: { type: Boolean, default: false },
  menuRef: { type: Function, default: () => {} },
})
</script>

<style scoped>
.dropdown-menu {
  position: absolute;
  right: 0.5rem;
  top: 2.5rem;
  background: var(--bg-white);
  border-radius: var(--border-radius-small);
  box-shadow: var(--box-shadow);
  z-index: 50;
}
</style>